<template>
  <div class="home" ref="appRef">
    11
    <div class="big-screen">
      <HeaderTab />
      <div class="content">
        <ContentLeft class="content-left" />
        <ContentCenter class="content-center" />
        <ContentRight class="content-right" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import useIndex from '@/utils/useDraw';
import HeaderTab from '@/components/layout/headerTab.vue';
import ContentLeft from '@/components/home/contentLeft/index.vue';
import ContentCenter from '@/components/home/contentCenter/index.vue';
import ContentRight from '@/components/home/contentRight/index.vue';
import request from '@/utils/http';
components: {
  HeaderTab;
  ContentLeft;
  ContentCenter;
  ContentRight;
}
// 适配处理
const { appRef, calcRate, windowDraw } = useIndex();
onMounted(() => {
  // todo 屏幕适应
  windowDraw();
  calcRate();
});

interface Req {
  apiKey: string;
  area?: string;
  areaID?: string;
}
interface Res {
  area: string;
  areaCode: string;
  areaid: string;
  dayList: any[];
}
const get15DaysWeatherByArea = (data?: Req) => {
  return request<Req, Res>({
    url: '/dev/test',
    method: 'GET',
    data,
    interceptors: {
      requestInterceptors(res) {
        console.log('接口请求拦截');

        return res;
      },
      responseInterceptors(result) {
        console.log('接口响应拦截');
        return result;
      },
    },
  });
};
onMounted(async () => {
  const res = await get15DaysWeatherByArea();
  console.log(res);
});
</script>
<style lang="scss" scoped>
.home {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  .big-screen {
    width: 100%;
    height: 100%;
    background-image: url('@/assets/images/bg.png');
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      display: flex;
      justify-content: space-between;
      height: 90%;
      padding: 10px;
      .content-left {
        width: 28%;
      }
      .content-center {
        width: 42%;
      }
      .content-right {
        width: 28%;
      }
    }
  }
}
</style>
